<template>
  <div class="index">
    <div class="container">
      <div class="swiper-box">
        <div class="swiper-menu">
          <ul>
            <li>
              <a href="javascript: ;">手机 电话卡</a>
              <div class="children">
                <ul
                  v-for="(item, index) in menuList"
                  :key="index"
                >
                  <a
                    v-for="sub in item"
                    :key="sub.id"
                    :href="`/#/product/${item.id}`"
                  >
                    <img v-lazy="sub.img" :alt="sub.name">
                    <span>{{sub.name}}</span>
                  </a>
                </ul>
              </div>
            </li>
            <li>
              <a href="javascript: ;">电视 盒子</a>
              <div class="children">
                <ul
                  v-for="(item, index) in menuList"
                  :key="index"
                >
                  <a
                    v-for="sub in item"
                    :key="sub.id"
                    :href="`/#/product/${sub.id}`"
                  >
                    <img v-lazy="sub.img" :alt="sub.name">
                    <span>{{sub.name}}</span>
                  </a>
                </ul>
              </div>
            </li>
            <li>
              <a href="javascript: ;">笔记本 显示器</a>
              <div class="children">
                <ul
                  v-for="(item, index) in menuList"
                  :key="index"
                >
                  <a
                    v-for="sub in item"
                    :key="sub.id"
                    :href="`/#/product/${sub.id}`"
                  >
                    <img v-lazy="sub.img" :alt="sub.name">
                    <span>{{sub.name}}</span>
                  </a>
                </ul>
              </div>
            </li>
            <li>
              <a href="javascript: ;">家电 插线板</a>
              <div class="children">
                <ul
                  v-for="(item, index) in menuList"
                  :key="index"
                >
                  <a
                    v-for="sub in item"
                    :key="sub.id"
                    :href="`/#/product/${sub.id}`"
                  >
                    <img v-lazy="sub.img" :alt="sub.name">
                    <span>{{sub.name}}</span>
                  </a>
                </ul>
              </div>
            </li>
            <li>
              <a href="javascript: ;">出行 穿戴</a>
              <div class="children">
                <ul
                  v-for="(item, index) in menuList"
                  :key="index"
                >
                  <a
                    v-for="sub in item"
                    :key="sub.id"
                    :href="`/#/product/${sub.id}`"
                  >
                    <img v-lazy="sub.img" :alt="sub.name">
                    <span>{{sub.name}}</span>
                  </a>
                </ul>
              </div>
            </li>
            <li>
              <a href="javascript: ;">智能 路由器</a>
              <div class="children">
                <ul
                  v-for="(item, index) in menuList"
                  :key="index"
                >
                  <a
                    v-for="sub in item"
                    :key="sub.id"
                    :href="`/#/product/${sub.id}`"
                  >
                    <img v-lazy="sub.img" :alt="sub.name">
                    <span>{{sub.name}}</span>
                  </a>
                </ul>
              </div>
            </li>
            <li>
              <a href="javascript: ;">电源 配件</a>
              <div class="children">
                <ul
                  v-for="(item, index) in menuList"
                  :key="index"
                >
                  <a
                    v-for="sub in item"
                    :key="sub.id"
                    :href="`/#/product/${sub.id}`"
                  >
                    <img v-lazy="sub.img" :alt="sub.name">
                    <span>{{sub.name}}</span>
                  </a>
                </ul>
              </div>
            </li>
            <li>
              <a href="javascript: ;">健康 儿童</a>
              <div class="children">
                <ul
                  v-for="(item, index) in menuList"
                  :key="index"
                >
                  <a
                    v-for="sub in item"
                    :key="sub.id"
                    :href="`/#/product/${sub.id}`"
                  >
                    <img v-lazy="sub.img" :alt="sub.name">
                    <span>{{sub.name}}</span>
                  </a>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <swiper class="swiper-container" :options="swiperOptions">
          <swiper-slide
            v-for="item in slideList"
            :key="item.id"
          ><img v-lazy="item.img" alt="" @click="$router.push(`/product/${item.id}`)"></swiper-slide>
          <!-- 分页器 -->
          <div class="swiper-pagination" slot="pagination"></div>
          <!-- 导航按钮 -->
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
          </swiper>

      </div>
      <div class="ads-box">
        <a
          v-for="item in adsList"
          :key="item.id"
          :href="`/#/product/${item.id}`"
        >
          <img v-lazy="item.img" alt="666">
        </a>
      </div>
      <div class="banner">
        <a href="javascript: ;">
          <img src="/imgs/banner-1.png" alt="banner">
        </a>
      </div>
    </div>
    <!-- 手机列表 -->
    <div class="products-box">
      <div class="container">
        <h2>手机</h2>
        <div class="wrapper">
          <div class="banner-left">
            <a href="javascript: ;">
              <img src="/imgs/mix-alpha.jpg" alt="mix-alpha">
            </a>
          </div>
          <div class="phone-list">
            <ul
              class="list"
              v-for="(arr, index) in phoneList"
              :key="index"
            >
              <a
                class="item"
                v-for="(item) in arr"
                :key="item.id"
              >
                <img v-lazy="item.mainImage" :alt="item.name">
                <h3>{{item.name}}</h3>
                <p class="item-subtitle">{{item.subtitle}}</p>
                <p class="price" @click.stop="addCart(item.id)">{{item.price}}元<span></span></p>
              </a>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <service-bar></service-bar>
    <modal
      title="提示"
      btnType="1"
      sureText="查看购物车"
      modalType="small"
      :showModal="showModal"
      @submit="gotoCart"
      @cancel="closeDialog"
    >
      <template v-slot:body>
        <p>已添加到购物车</p>
      </template>
    </modal>
  </div>
</template>

<script>
  import { 
    getProducts,
    addProducts
  } from './../../util/request.js'
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
  import ServiceBar from '../../components/ServiceBar.vue'
  import Modal from '../../components/Modal.vue'
  export default {
    data() {
      return {
        slideList:[
          {
            id:'42',
            img:'/imgs/slider/slide-1.jpg'
          },
          {
            id:'45',
            img:'/imgs/slider/slide-2.jpg'
          },
          {
            id:'46',
            img:'/imgs/slider/slide-3.jpg'
          },
          {
            id:'47',
            img:'/imgs/slider/slide-4.jpg'
          },
          {
            id:'48',
            img:'/imgs/slider/slide-5.jpg'
          }
        ],
        menuList: [
          [
             {
              id:30,
              img:'/imgs/item-box-1.png',
              name:'小米CC9',
            },{
              id:31,
              img:'/imgs/item-box-2.png',
              name:'小米8青春版',
            },{
              id:32,
              img:'/imgs/item-box-3.jpg',
              name:'Redmi K20 Pro',
            },{
              id:33,
              img:'/imgs/item-box-4.jpg',
              name:'移动4G专区',
            }
          ],
          [
             {
              id:30,
              img:'/imgs/item-box-1.png',
              name:'小米CC9',
            },{
              id:31,
              img:'/imgs/item-box-2.png',
              name:'小米8青春版',
            },{
              id:32,
              img:'/imgs/item-box-3.jpg',
              name:'Redmi K20 Pro',
            },{
              id:33,
              img:'/imgs/item-box-4.jpg',
              name:'移动4G专区',
            }
          ],
          [
             {
              id:30,
              img:'/imgs/item-box-1.png',
              name:'小米CC9',
            },{
              id:31,
              img:'/imgs/item-box-2.png',
              name:'小米8青春版',
            },{
              id:32,
              img:'/imgs/item-box-3.jpg',
              name:'Redmi K20 Pro',
            },{
              id:33,
              img:'/imgs/item-box-4.jpg',
              name:'移动4G专区',
            }
          ],
          [
             {
              id:30,
              img:'/imgs/item-box-1.png',
              name:'小米CC9',
            },{
              id:31,
              img:'/imgs/item-box-2.png',
              name:'小米8青春版',
            },{
              id:32,
              img:'/imgs/item-box-3.jpg',
              name:'Redmi K20 Pro',
            },{
              id:33,
              img:'/imgs/item-box-4.jpg',
              name:'移动4G专区',
            }
          ],
          [
             {
              id:30,
              img:'/imgs/item-box-1.png',
              name:'小米CC9',
            },{
              id:31,
              img:'/imgs/item-box-2.png',
              name:'小米8青春版',
            },{
              id:32,
              img:'/imgs/item-box-3.jpg',
              name:'Redmi K20 Pro',
            },{
              id:33,
              img:'/imgs/item-box-4.jpg',
              name:'移动4G专区',
            }
          ],
          [
             {
              id:30,
              img:'/imgs/item-box-1.png',
              name:'小米CC9',
            },{
              id:31,
              img:'/imgs/item-box-2.png',
              name:'小米8青春版',
            },{
              id:32,
              img:'/imgs/item-box-3.jpg',
              name:'Redmi K20 Pro',
            },{
              id:33,
              img:'/imgs/item-box-4.jpg',
              name:'移动4G专区',
            }
          ],
          [
             {
              id:30,
              img:'/imgs/item-box-1.png',
              name:'小米CC9',
            },{
              id:31,
              img:'/imgs/item-box-2.png',
              name:'小米8青春版',
            },{
              id:32,
              img:'/imgs/item-box-3.jpg',
              name:'Redmi K20 Pro',
            },{
              id:33,
              img:'/imgs/item-box-4.jpg',
              name:'移动4G专区',
            }
          ],
        ],
        adsList:[
          {
            id:33,
            img:'/imgs/ads/ads-1.png'
          },{
            id:48,
            img:'/imgs/ads/ads-2.jpg'
          },{
            id:45,
            img:'/imgs/ads/ads-3.png'
          },{
            id:47,
            img:'/imgs/ads/ads-4.jpg'
          }
        ],
        phoneList: [],
        swiperOptions: {
          autoplay:true,
          effect : 'fade',
           fadeEffect: {
            crossFade: true,
          },
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable :true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        },
        // 控制对话框显示和隐藏
        showModal: false
      }
    },
    components: {
      Swiper,
      SwiperSlide,
      ServiceBar,
      Modal
    },
    mounted() {
      this.getPhoneList()
    },
    methods: {
      getPhoneList() {
        let params = {
          categoryId: 100012,
            pageSize: 14
        }
        getProducts(params).then( res => {
          this.phoneList = [
            res.list.slice(6,10),
            res.list.slice(10,14)
          ]
          console.log(this.phoneList)
        })
      },
      // 添加到购物车
      addCart(id) {
        let params = {
          productId: id,
          selected: true
        }
        addProducts(params).then(res => {
          this.showModal = true
          this.$store.dispatch('saveCartCount', res.cartTotalQuantity)
        })
      },
      gotoCart() {
        this.showModal = false
        this.$router.push('/cart')
      },
      closeDialog() {
        this.showModal = false
      }
    }
  }
</script>

<style lang='scss' scoped>
@import '../../assets/scss/mixin.scss';
@import '../../assets/scss/config.scss';
.index{
  position: relative;
  .container{
    .swiper-box{
      position: relative;
      z-index: 2;
      .swiper-menu{
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 246px;
        height: 451px;
        box-sizing: border-box;
        padding: 26px 0;
        background-color: rgba(0,0,0,.3);
        li{
          a{
            padding: 0 16px;
            @include flex();
            color: #ffffff;
            font-size: 16px;
            line-height: 50px;
            &::after{
              content: ' ';
              display: inline-block;
              @include bgImg(16px,16px,'/imgs/icon-arrow.png');
            }
          }
          &:hover{
            background: $colorA;
            transition: all .3s;
            .children{
              display: block;
            }
          }
        }
        .children{
          position: absolute;
          left: 246px;
          top: 0;
          background: #ffffff;
          width: 980px;
          height: 451px;
          display: none;
          ul{
            padding: 10px 0;
            margin-left: 23px; 
            @include flex();
            a{
              flex: 1;
              color: #000;
              @include flex(flex-start);
              cursor: pointer;
              img{
                width: 35px;
                height: 42px;
              }
              span{
                display: inline-block;
                line-height: 100%;
              }
            }
          }
        }
      }
      .swiper-container{
        height: 451px;
        img{
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
        .swiper-button-prev{
          margin-left: 250px;
        }
      }
    }
    .ads-box{
      @include flex();
      margin-top: 14px;
      a{
        display: inline-block;
        img{
          height: 167px;
          width: 296px;
        }
      }
    }
    .banner{
      margin-top: 31px;
      a{
        display: inline-block;
        img{
          width: 100%;
          height: 130px;
        }
      }
    }
  }
  .products-box{
    background: $colorJ;
    margin-top: 50px;
    padding: 30px 0;
    .container{
      h2{
        padding: 0 0 20px;
      }
      .wrapper{
        display: flex;
        .banner-left{
          margin-right: 16px;
          width: 224px;
          a{
            display: inline-block;
            height: 100%;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
        .phone-list{
          width: 986px;
          .list{
            @include flex();
            margin-bottom: 14px;
            &:last-child{
              margin: 0;
            }
            .item{
              display: inline-block;
              width: 236px;
              height: 302px;
              text-align: center;
              background: #ffffff;
              img{
                display: inline-block;
                width: 190px;
                height: auto;
              }
              h3{
                color: $colorB;
              }
              .item-subtitle{
                color: $colorD;
                margin: 6px 0 13px;
              }
              .price{
                cursor: pointer;
                color: #f00;
                font-size: $fontJ;
                span{
                  display: inline-block;
                  margin-left: 5px;
                  width: 14px;
                  height: 14px;
                  @include bgImg(14px,14px,'/imgs/icon-cart-hover.png');
                }
              }
            }
          }
        }
      }
    }
  }
}
  
</style>
